<template>
  <div>
    <div v-if="isShowMenus" id="app-menu" class="pagebox" :style="{ height: menuHeight, width: menuWidth }">
      <a-menu
        style="height:100%"
        :default-selected-keys="[$route.path]"
        :selectedKeys="[$route.path]"
        mode="inline"
        :theme="theme ? 'light' : 'dark'"
        :inline-collapsed="collapsed"
        @click="handlemenu"
      >
        <!-- <a-menu-item key="/equipmentList">
          <a-icon type="robot" />
          <span class="spanfont">设备</span>
        </a-menu-item> -->

        <a-menu-item v-for="(item, index) in currentMenus" :key="item.path" v-if="item.display == 0">
          <a-icon type="appstore" />
          <span class="spanfont">{{ item.name }}</span>
        </a-menu-item>
      </a-menu>
      <div class="menu-openClose" :style="{ width: menuWidth }" @click="openmenu">
        <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" style="font-size: 20px;color:#fff" class="colorin" />
      </div>
    </div>
  </div>
</template>

<script>
import varibless from '@assets/styles/varibless.less';
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('menu/');

const whiteLists = [
  '/deviceDetail',
  '/debugMachineHistory',
  '/debugHistory',
  '/productionDetails',
  '/logInfo',
  '/dataMonitor',
  '/yieldDetails',
];

function getMenus(lists, id, arr = []) {
  for (let index in lists) {
    if (lists[index].id == id) {
      arr = lists[index].children.filter((item) => item.display == 0);
      break;
    }
    if (lists[index].children && lists[index].children.length > 0) {
      arr = getCurrentMenus(lists[index].children, id, arr);
    }
  }
  return arr;
}

function getId(lists, activeMenuPath, id = '') {
  for (let index in lists) {
    if (lists[index].path == activeMenuPath) {
      id = lists[index].parentId;
      break;
    }
    if (lists[index].children && lists[index].children.length > 0) {
      id = getId(lists[index].children, activeMenuPath, id);
    }
  }
  return id;
}

function getWhiteItemChildren(lists, id, arr = []) {
  for (let index in lists) {
    if (lists[index].id == id) {
      arr = lists[index].children;
      break;
    }
    if (lists[index].children && lists[index].children.length > 0) {
      arr = getWhiteItemChildren(lists[index].children, id, arr);
    }
  }
  return arr;
}

function getWhitePage(lists, arr = []) {
  for (let index in lists) {
    if (lists[index].type == 3) {
      arr.push(lists[index]);
      // break;
    }
    if (lists[index].children && lists[index].children.length > 0) {
      arr = getWhitePage(lists[index].children, arr);
    }
  }
  return arr;
}

function getCurrentMenus(lists, activeMenuPath, id) {
  // debugger
  let arr = [];
  let isWhite = whiteLists.includes(activeMenuPath);
  if (isWhite) {
    let whiteId = getId(lists, activeMenuPath);
    let whiteItemChildren = getWhiteItemChildren(lists, whiteId);
    arr = getWhitePage(whiteItemChildren);
  } else {
    arr = getMenus(lists, id);
  }
  return arr;
}

export default {
  name: 'index',
  props: {
    height: {
      type: String,
      default: '90vh',
    },
  },
  data() {
    return {
      menuHeight: '90vh',
      menuWidth: '200px',
      collapsed: false,
      collapsedWy: '80px',
      collapsedWn: '200px',
      varibless: varibless,
      selectedKeys: [],
      currentMenus: [],
      isShowMenus: false,
    };
  },
  watch: {
    height: {
      deep: true,
      handler(val) {
        this.menuHeight = val;
        return;
      },
    },

    activeMenuPath: function(newVal) {
      this.currentMenus = getCurrentMenus(this.menuLists, newVal, this.moduleId);
      this.selectedKeys = [newVal];
    },

    currentMenus: {
      deep: true,
      handler(newVal) {
        if (newVal.length > 1) {
          this.isShowMenus = true;
          this.$emit('showMenuChange', true);
        } else {
          this.isShowMenus = false;
          this.$emit('showMenuChange', false);
        }
      },
    },
  },
  created() {
    this.menuHeight = this.height;
    let _this = this;
    //    setTimeout(()=>{

    //  window.onresize = function () { // 定义窗口大小变更通知事件
    //   // _this.screenWidth = document.documentElement.clientWidth // 窗口宽度
    //    _this.menuHeight = (document.documentElement.clientHeight - _this.varibless.headerHeightpxno) + "px";
    //  // _this.appBodyHeight = (document.documentElement.clientHeight-_this.varibless.headerHeightpxno)+'px' // 窗口高度
    // }
    //  this.menuHeight = (document.body.clientHeight - this.varibless.headerHeightpxno) + "px";
    //    },200)

    // let url = this.$route.fullPath;
    // if (url&&url!='/workshop'&&url!=='/distributionMap'&&url!=='/basicInformation') {
    //   this.selectedKeys = [];
    //   this.selectedKeys.push(url);
    // }else{
    //   this.selectedKeys = ["/equipmentList"];
    // }

    this.selectedKeys.push(this.activeMenuPath);
  },

  computed: {
    ...mapState(['menuLists', 'activeMenuPath', 'moduleId']),

    theme: function() {
      return this.$store.getters.thisTheme;
    },
  },

  mounted() {
    this.currentMenus = getCurrentMenus(this.menuLists, this.activeMenuPath, this.moduleId);
    console.log(this.currentMenus, 222);
  },

  methods: {
    //点击菜单
    handlemenu(val) {
      let path = `${val.key}`;
      let query = this.$route.query;
      let isWhite = whiteLists.includes(this.activeMenuPath);
      if (isWhite) {
        this.$router.push({ path, query });
      } else {
        this.$router.push({ path });
      }
    },
    //展开合拢菜单
    openmenu() {
      this.collapsed = !this.collapsed;
      this.$emit('collapsedChange', this.collapsed);
      if (this.collapsed) {
        this.menuWidth = this.varibless.menuWClose;
      } else {
        this.menuWidth = this.varibless.menuWopen;
      }
    },
    home: function() {
      // alert('你点击了首页');
    },
  },
};
</script>

<style scoped lang="less">
#app-menu {
  float: left;
  background-color: #001529;
  position: relative;
  box-sizing: border-box;
  // padding-bottom: 40px;
  transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
  zoom: 1;
}
#app-menu .spanfont {
  font-size: 16px !important;
}

.menu-openClose {
  width: 100%;
  position: absolute;
  bottom: 0;
  line-height: 40px;
  height: 40px;
  text-align: center;
}
</style>
